<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="../../css/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="../../js/bootstrap-table.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/bootstrap-table-zh-CN.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="text-align: right;">
    <div>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
            添加产品
        </button>
        <button class="btn btn-danger" onclick="deletetr()">删除产品</button>
        <button id="previewBtn" class="btn btn-primary" data-target="#staticBackdrop1" onclick="preview()">预览</button>
    </div>
</div>


<div class="container"
     style="box-shadow: rgba(144,146,154,0.46) 10px 10px;
     background-color: whitesmoke;margin-top: 50px;
     text-align: center;
    padding-bottom:20px ">
    <div>
        <h2>生产计划单</h2>
    </div>
    <div class="">
        <form>
            <div class="form-row">
                <div class="col">
                    生产理由： <input type="text" class="form-control" value="新发生" readonly>
                </div>
                <div class="col">
                    生产时间
                    <input type="date" id="productionTime" class="form-control" placeholder="Last name">
                </div>

            </div>
            <div class="form-row">
                <div class="col">
                    登记人： <input type="text" class="form-control"  id="registrant" placeholder="登记人">
                </div>
                <div class="col">
                    登记时间:
                    <input type="text" id="djdate" class="form-control" value="" readonly>
                </div>
            </div>
        </form>
        <div>
            <table id="showTable" style="width: 100%; margin-top: 20px">
                <thead>
                <tr style="background-color: #a4efef;">
                    <th>选择</th>
                    <th>产品名称</th>
                    <th>产品编号</th>
                    <th>描述</th>
                    <th>数量</th>
                    <th>单位</th>
                    <th>单价</th>
                    <th>小计</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
        <div style="margin: 20px 0px">
            备注：
            <textarea class="form-control" id="remark"></textarea>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop1" data-backdrop="static" data-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel1">预览</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container"
                     style="padding-bottom:20px ;box-shadow: rgba(144,146,154,0.46) 5px 5px; background-color: whitesmoke;margin-top: 50px;text-align: center">
                    <div>
                        <h2>生产计划单</h2>
                    </div>
                    <div class="">
                        <form>
                            <div class="form-row">
                                <div class="col">
                                    生产理由： <input id="reason" type="text" class="form-control" value="新发生" readonly>
                                </div>
                                <div class="col">
                                    生产时间
                                    <input type="date" id="productionTime1" class="form-control" placeholder="Last name"
                                           readonly>
                                </div>

                            </div>
                            <div class="form-row">
                                <div class="col">
                                    登记人： <input type="text" class="form-control" id="registrant1" readonly>
                                </div>
                                <div class="col">
                                    登记时间:
                                    <input type="text" id="djdate1" class="form-control" value="" readonly>
                                </div>

                            </div>

                            <div class="form-row">
                                <div class="col">
                                    总件数：<span id="totalNumber"></span>
                                </div>
                                <div class="col">
                                    总金额：<span id="totalPrices"></span>
                                </div>
                            </div>

                        </form>
                        <div>
                            <table id="table3" style="width: 100%; margin-top: 20px">
                                <thead>
                                    <tr style="background-color: #a4efef;">
                                        <th>选择</th>
                                        <th>产品名称</th>
                                        <th>产品编号</th>
                                        <th>描述</th>
                                        <th>数量</th>
                                        <th>单位</th>
                                        <th>单价</th>
                                        <th>小计</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                        <div style="margin: 0px 20px">
                            备注：
                            <textarea class="form-control" id="remark1"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveApply()">保存</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">生产计划</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col">
                        产品I级分类
                        <select class="form-control" name="" id="first_kind_id">
                            <option value="">未选择</option>
                            <option value="1">电子</option>
                        </select>
                    </div>
                    <div class="col">
                        产品II级分类
                        <select class="form-control" name="" id="second_kind_id">
                            <option value="">未选择</option>
                            <option value="1">计算机</option>
                        </select>
                    </div>
                    <div class="col">
                        产品III级分类
                        <select class="form-control" name="" id="third_kind_id">
                            <option value="">未选择</option>
                            <option value="1">服务器</option>
                        </select>
                    </div>
                    <div class="col">
                        <button class="btn btn-primary" style="margin-top: 20px" onclick="queryDfile()">查询</button>
                    </div>
                </div>

                <table id="tab"></table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var d = new Date();

        var year = d.getFullYear()  //获取年

        var month = d.getMonth() + 1;  //获取月，从 Date 对象返回月份 (0 ~ 11)，故在此处+1

        var day = d.getDay()    //获取日

        var days = d.getDate() //获取日期

        var hour = d.getHours()   //获取小时

        var minute = d.getMinutes()  //获取分钟

        var second = d.getSeconds()   //获取秒
        $("#djdate").val(year + "/" + month + "/" + days + " " + hour + ":" + minute + ":" + second)

    })

    function queryDfile() {
        $("#tab").bootstrapTable("refresh");
    }

    $(function (){
        $.ajax({
            type: "post",
            url:"/plan/queryRegistrant",
            success:function (data){
                $("#registrant").val(data.loginId);
            }
        })
    })

    $(function () {
        $("#tab").bootstrapTable({
            method: "post",
            contentType: "application/json",
            striped: true,
            pageNumber: 1,
            pageSize: 3,
            pagination: true,
            sidePagination: 'server',
            pageList: [3, 5, 6, 10],
            url: "/plan/queryPlanDFile",
            queryParams: function (params) {

                return {
                    // 计算页号(当前页)
                    pageNumber: (params.offset / params.limit) + 1,
                    // 计算页大小
                    pageSize: params.limit,
                    querySearch: {
                        firstKindId: $("#first_kind_id").val(),
                        secondKindId: $("#second_kind_id").val(),
                        thirdKindId: $("#third_kind_id").val()
                    }
                }
            },
            columns: [
                {title: '产品编号', field: 'productId', align: 'center'},
                {title: '产品名称', field: 'productName', align: 'center'},
                {
                    title: '用途类型', field: 'type', align: 'center', formatter: function (value, row, index) {
                        if (value == 'y001-1') {
                            return '商品';
                        } else if (value == 'y001-2') {
                            return '物料';
                        } else {
                            return '未知';
                        }
                    }
                },
                {title: '单位', field: "amountUnit", align: 'center'},
                {title: '单价', field: "costPrice", align: 'center'},
                {
                    title: "操作", field: "no",
                    formatter: function (value, row, index) {
                        var btn1 = "<button class=\"btn btn-primary \" data-toggle=\"modal\" onclick='productionDfile(" + JSON.stringify(row) + ")'>生产</button>";
                        return btn1;
                    }
                }
            ]
        })
    })

    function productionDfile(data) {
        let text = $(".productid");
        if (text.length > 0) {
            for (let i = 0; i < text.length; i++) {
                if (kk(text, data.productId)) {
                    $("#showTable tbody").append("<tr>" +
                        "<td><input type='checkbox'/></td>" +
                        "<td>" + data.productName + "</td>" +
                        "<td class='productid'>" + data.productId + "</td>" +
                        "<td>" + data.productDescribe + "</td>" +
                        "<td><input type='number' class='number' value='1'  min='1' style='border: none;outline: none;background-color: whitesmoke  ' /></td>" +
                        "<td>" + data.amountUnit + "</td>" +
                        "<td>" + data.costPrice + "</td>" +
                        "<td></td>" +
                        "</tr>")
                } else {
                    alert("已有这个类型无法继续生产");
                    break;
                }
            }
        } else {
            $("#showTable tbody").append("<tr>" +
                "<td><input type='checkbox'/></td>" +
                "<td>" + data.productName + "</td>" +
                "<td class='productid'>" + data.productId + "</td>" +
                "<td>" + data.productDescribe + "</td>" +
                "<td><input type='number' class='number' value='1' min='1'  style='border: none;outline: none;background-color: whitesmoke' /></td>" +
                "<td>" + data.amountUnit + "</td>" +
                "<td>" + data.costPrice + "</td>" +
                "<td></td>" +
                "</tr>")
        }

    }

    function deletetr() {
        if ($("input[type=checkbox]:checked").length > 0) {
            $("input[type=checkbox]:checked").parent().parent().remove();
        } else {
            alert("请至少选择一个产品");
        }
    }

    function preview() {
        if ($(".productid").length > 0 ) {
            $("#staticBackdrop1").modal("show");
            $("#djdate1").val($("#djdate").val());
            $("#productionTime1").val($("#productionTime").val())
            $("#remark1").val($("#remark").val());
            $("#table3 tbody").html($("#showTable tbody").html());
            $("#remark1").prop("readOnly",true);
            $("#registrant1").val($("#registrant").val());
            var totalNumber=0;
            var totalPrices=0;
            $("#showTable tbody tr").each(function(index,tr) {
                $("#table3 tbody tr").eq(index).find('td input[type=number]').val($(tr).find('.number').val())
                let number =parseInt($(tr).find("td").eq(6).text());
                let number1 =parseInt($(tr).find('.number').val());
                totalPrices+=number1*number;
                totalNumber+=number1;
                $("#table3 tbody tr").eq(index).find("td").eq(7).text(number1*number);
            })
            $("#totalNumber").text(totalNumber);
            $("#totalPrices").text(totalPrices)


        } else {
            $("#staticBackdrop1").modal("hide");
            alert("至少要添加一个产品")
        }
    }

    function kk(data, id) {
        for (var i = 0; i < data.length; i++) {
            if (data[i].innerText == id) {
                return false;
            }
        }
        return true;
    }

    function saveApply(){
        var applyList=[];

        $("#table3 tbody tr").each(function (){

            var apply={
                register:$("#registrant1").val(),
                registerTime:$("#djdate1").val(),
                remark:$("#remark").val(),
                productName:$(this).find("td:eq(1)").text(),
                productId:$(this).find("td:eq(2)").text(),
                productDescribe:$(this).find("td:eq(3)").text(),
                amount:$(this).find("td:eq(4) input").val()
            }
            applyList.unshift(apply);
        })
        $.ajax({
            type:"post",
            contentType: "application/json",
            data:JSON.stringify(applyList),
            url: "/plan/addApply",
            success:function (data){
              if (data>0){
                  alert("保存成功，请等待审核");
                  window.location=location
              }else{
                  alert("保存失败");
              }

            }
        })
    }

</script>

</body>
</html>